<template>
  <div class="chatpop-wrapper">
    <img
      class="chat-avatar"
      src="../../assets/image/mengyi-icon-Rectangle.png" />
    <div class="message-wrapper">
      <div class="message-wrapper-doctor">
        <img
          class="welcome-background"
          src="../../assets/image/chatbox-background.png" />
        <div class="welcome-header">
          <div class="header-h1">您好！我是萌医大模型</div>
          <div class="header-h2">
            我能够为您提供中医医疗建议，进行多轮对话哦～
          </div>
        </div>
        <div class="welcome-middle">为您推荐</div>
        <div class="welcome-middle-line"></div>
        <div class="welcome-body">
          <div
            class="welcome-single single-ani"
            v-for="(item, index) in menuList"
            :key="index"
            @click="startDialog(item)">
            <img class="single-icon" :src="item.icon" />
            <div class="single-content">
              <div class="single-content-name">{{ item.title }}</div>
              <div class="single-content-discription">
                {{ item.guidingText }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import request from '../../utils/request'
  export default {
    name: 'ChatWelcome',
    props: {},
    components: {},
    data() {
      return {
        menuList: [],
      }
    },
    computed: {},
    watch: {},
    created() {
      this.requireMenuList()
    },
    mounted() {},
    methods: {
      startDialog(item) {
        let userInfo = localStorage.getItem('userInfo')
        new Promise((resolve, reject) => {
          userInfo ? resolve() : reject()
        })
          .then((res) => {
            this.$emit('clickMenu', item)
          })
          .catch((err) => {
            console.log('show login in welcome :>> ', err)
            this.$emit('goLogin')
          })
      },
      requireMenuList() {
        request({ method: 'GET', url: '/applet/menu/list' }).then((res) => {
          this.menuList = res.data.data
        })
      },
    },
  }
</script>
<style scoped lang="less">
  .chatpop-wrapper {
    width: 100%;
    display: flex;
    align-items: start;
    margin: 10px 0px;
  }
  .chat-avatar {
    height: 40px;
    width: 40px;
    margin-left: -40px;
  }
  .message-wrapper {
    margin-left: 12px;
    width: 100%;
  }
  .message-wrapper-doctor {
    border-radius: 12px 12px 12px 12px;
    padding: 24px 8px 24px 24px;
    background: #fff;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    .welcome-background {
      height: 100px;
      width: 222px;
      position: absolute;
      right: 0px;
      top: 0px;
    }
    .welcome-header {
      display: flex;
      align-items: center;
      margin-bottom: 24px;
      .header-h1 {
        font-size: 20px;
        font-weight: 600;
        color: #599497;
        line-height: 23px;
      }
      .header-h2 {
        margin-left: 20px;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        line-height: 19px;
      }
    }
    .welcome-middle {
      //   height: 25px;
      font-size: 18px;
      font-weight: 600;
      color: #1a1a1a;
      line-height: 21px;
    }
    .welcome-middle-line {
      width: 72px;
      height: 4px;
      background: linear-gradient(
        90deg,
        rgba(101, 211, 219, 0.6) 0%,
        rgba(101, 211, 219, 0) 100%
      );
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
    }
    .welcome-body {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-between;
      margin-top: 17px;
      .welcome-single {
        cursor: pointer;
        width: 30%;
        height: 101px;
        background: #f6f7f8;
        border-radius: 8px 8px 8px 8px;
        padding: 23px 23px 0px 12px;
        display: flex;
        margin-right: 16px;
        margin-bottom: 16px;
        transition: all 0.2s;
        .single-icon {
          width: 55px;
          height: 55px;
          border-radius: 10px 10px 10px 10px;
        }
        .single-content {
          display: flex;
          flex-direction: column;
          margin-left: 8px;
          .single-content-name {
            font-size: 16px;
            font-weight: 600;
            color: #1a1a1a;
            line-height: 19px;
            margin-bottom: 4px;
          }
          .single-content-discription {
            height: 40px;
            font-size: 14px;
            font-weight: 400;
            color: #999999;
            // line-height: 16px;
            // white-space: nowrap; /* 禁止文本换行 */
            // overflow: hidden; /* 隐藏溢出部分 */
            // text-overflow: ellipsis;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
      .single-ani {
        animation: easein 0.5s;
      }
      @keyframes easein {
        from {
          opacity: 0;
          transform: translateY(-20px);
        }
        to {
          opacity: 1;
          transform: translateY(0px);
        }
      }
      .welcome-single:hover {
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
      }
    }
  }
</style>
